<script setup>
import IndexMenu from "./components/IndexMenu.vue";
</script>

<template>
  <div class="layout">
    <!-- 上半部分菜单栏 -->
    <div class="menu">
      <!-- 在这里放置你的菜单内容 -->
      <index-menu/>
    </div>

    <!-- 下半部分路由内容区域 -->
    <div class="router11">
      <router-view/>
    </div>
  </div>
</template>

<style scoped>
.layout {
  display: flex;
  flex-direction: column; /* 垂直布局 */
  height: 100vh; /* 让布局占满整个视窗高度 */
  width: 100vw;
}

.menu {
  /* 上半部分菜单栏固定高度为6% */
  /*flex: 0 0 6%;*/
  overflow: auto; /* 如果菜单内容超出高度，显示滚动条 */
  background-color: #bbf3d7;
}

.router11 {
  /* 下半部分路由内容区域会占满剩余空间 */
  flex: 1;
}

</style>
